<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锅锅登录</title>
    <link rel="icon" type="image/x-icon" href="../img/火锅.png">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #topv {
            font-size: 100px;
            color: transparent;
            -webkit-text-stroke: 1px red;
            letter-spacing: 0.04em;
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body style="background-image: url('../img/bg(1).png');">
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="10" :xl="1" offset="7">
                    <div id="topv">
                        舌尖上的美食
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="margin-top:200px" :model="user">
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" offset="10" style="float: left;">
                    <div @click="lg"
                         style="float: left;width: 90px;color: yellow;background-color: black;text-align: center;">登录
                    </div>
                    <div @click="rg"
                         style="float: left;width: 90px;color: yellow;background-color: black;text-align: center;">注册
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" offset="10">
                    <el-input prefix-icon="el-icon-phone" placeholder="请输电话号码" v-model="user.phone" clearable
                              @blur.prevent="changeCount()"></el-input>
                </el-col>
            </el-row>
            <br>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" offset="10">
                    <el-input v-if="showPrise" prefix-icon="el-icon-user-solid" placeholder="请输用户名"
                              v-model="user.username" clearable @blur.prevent="changeCount2()"></el-input>
                </el-col>
            </el-row>
            <br>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" offset="10">
                    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="user.password" show-password
                              clearable @blur.prevent="changeCount3()"></el-input>
                </el-col>
            </el-row>
            <br>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="2.5" :xl="1" offset="10">
                    <el-button type="primary" icon="el-icon-mouse" @click="login">登录</el-button>
                    <el-button type="primary" icon="el-icon-mouse" @click="register" v-if="showPrise"
                               :disabled="disabled">注册
                    </el-button>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/jquery-3.4.1.js"></script>
<script>


    var invite = window.document.location.href;
    var index = invite.lastIndexOf("=");
    var code = invite.substring(index + 1, invite.length);


    var v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    phone: '',
                    username: '',
                    password: '',
                },
                disabled: true,
                showPrise: false,
                code: invite.substring(index + 1, invite.length)
            }
        },
        methods: {
            lg: function () {
                var _this = this;
                _this.showPrise = false;
            },
            rg: function () {
                var _this = this;
                _this.showPrise = true;
            },
            changeCount: function () {
                var _this = this;
                console.log(_this);
                if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(_this.user.phone))) {
                    _this.$message.error('请输入正确的电话');
                }
                if ((/^[1][3,4,5,7,8][0-9]{9}$/.test(_this.user.phone)) && (/^[a-z0-9_]{6,10}$/.test(_this.user.username)) && (/^[a-z0-9]{6,10}$/.test(_this.user.password))) {
                    _this.disabled = false
                }
            },
            changeCount2: function () {
                var _this = this;
                if (!(/^[a-z0-9_]{6,10}$/.test(_this.user.username))) {
                    _this.$message.error('用户名格式错误');
                }
                if ((/^[1][3,4,5,7,8][0-9]{9}$/.test(_this.user.phone)) && (/^[a-z0-9_]{6,10}$/.test(_this.user.username)) && (/^[a-z0-9]{6,10}$/.test(_this.user.password))) {
                    _this.disabled = false
                }
            },
            changeCount3: function () {
                var _this = this;
                if (!(/^[a-z0-9]{6,10}$/.test(_this.user.password))) {
                    _this.$message.error('密码格式错误');
                }
                if ((/^[1][3,4,5,7,8][0-9]{9}$/.test(_this.user.phone)) && (/^[a-z0-9_]{6,10}$/.test(_this.user.username)) && (/^[a-z0-9]{6,10}$/.test(_this.user.password))) {
                    _this.disabled = false
                }
            },
            login: function () {
                var _this = this;
                console.log(11111111);
                $.ajax({
                    url: '/login',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        phone: _this.user.phone,
                        username: _this.user.username,
                        password: _this.user.password
                    },
                    success: function (data) {
                        if (data.data == 1) {
                            _this.$message.success("登录成功");
                            location.href = "/html/shouye.html";
                        } else {
                            _this.$message.error('登录失败');
                        }
                    }
                })
            },
            register: function () {
                var _this = this;
                console.log('邀请码：' + this.code)
                $.ajax({
                    url: '/register',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        phone: _this.user.phone,
                        username: _this.user.username,
                        password: _this.user.password,
                        code: _this.code
                    },
                    success: function (data) {
                        if (data.data == 1) {
                            _this.$message.success("注册成功")
                        } else if (data.data == 2) {
                            _this.$message.error('该手机已注册');
                        } else {
                            _this.$message.error('注册失败');
                        }
                    }
                })
            }
        }
    });
</script>
</body>
</html>